<template>
  <div style="width: 70%;margin-left: 10%;margin-top: 20px">
    <el-table
      ref="multipleTable"
      :data="songList"
      tooltip-effect="dark"
      style="width: 100%"
      :default-sort = "{prop: 'name', order: 'descending'}"
      @selection-change="handleSelectionChange">
      <el-table-column type="index">
      </el-table-column>
      <el-table-column label="图片" >
        <template slot-scope="scope">
          <v-img
            width="80px"
            :src="scope.row.picture"
            aspect-ratio="1"
            class="grey lighten-2"
          >
            <template v-slot:placeholder>
              <v-layout
                fill-height
                align-center
                justify-center
                ma-0
              >
                <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
              </v-layout>
            </template>
          </v-img>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        sortable
        label="名称"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="audioDuration"
        sortable
        label="时长"
        width="120">
      </el-table-column>
      <el-table-column label="返回信息" width="100">
        <template slot-scope="scope">
          <span style="color: dodgerblue" v-if="scope.row.state===1">待审核</span>
          <span style="color: red" v-if="scope.row.state===2">不通过</span>
          <span style="color: deepskyblue" v-if="scope.row.state!=2&&scope.row.state!=1">通过</span>
        </template>
      </el-table-column>
    </el-table>

    <v-dialog max-width="500" v-model="show" persistent scrollable>
      <v-card>
        <!--对话框的标题-->
        <v-toolbar dense dark color="primary">
          <v-toolbar-title>歌词详情</v-toolbar-title>
          <v-spacer/>
          <!--关闭窗口的按钮-->
          <v-btn icon @click="closeWindow">
            <v-icon>close</v-icon>
          </v-btn>
        </v-toolbar>
        <v-card-text class="px-3" style="height: 400px">
          <el-input
            type="textarea"
            style=""
            v-model="lyric"
            show-word-limit
            size="medium"
            :autosize="{ minRows: 15, maxRows: 15}"
          >
          </el-input>
        </v-card-text>
      </v-card>
    </v-dialog>
  </div>

</template>

<script>
import {mixin} from '../mixins'

/*
*AlbumContent  歌集内容
*
* 在歌单显示的歌集内容
* 1.songList已被赋值  songList = listOfsongs, listOfsong是ssessionStorage
*
* */
export default {
  name: 'upload-list',
  props: [
    'songList'
  ],
  mixins: [mixin]

}
</script>

<style scoped>
  .noList {
    display: inline-block;
    font-size: 2.3em;
    margin-top: 50px;
    margin-left: 45%;
  }
  *{
    box-sizing: border-box;
  }
  .content {
    background-color: white;
    border-radius: 12px;
    padding: 20px 40px;
    min-width: 700px;
  }
  .content .title {
    text-align: center;
  }
  .content > ul {
    width: 100%;
    padding-bottom: 50px;
  }
  .content > ul > li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    display: block;
    height: 80px;
    line-height: 80px;
    text-indent: 20px;
  }
  .list-content {
    cursor: pointer;
  }
  .song-item {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    align-items: center;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .list-content:hover {
    background-color: whitesmoke;
  }
  .item-index {
    width: 10%;
    margin-left: 10%;

  }
  .item-title {
    width: 20%;
  }
  .item-name {
    width: 20%;
  }
  .item-picture {
    width: 6%;
  }
  .item-intro {
    width: 20%;
  }
  .bofangbtn{
    width: 5%;
  }
</style>
